<template>
  <view>

    <view class="bottomControl" v-if="ControlList">

      <view class="bottomControlSwiperItem" v-if="ControlList">
        <navigator url="/subpkg/play_Page/play_Page">
          <view class="cover">
            <image class="musicCover" :src="ControlList[indexList].al.picUrl"></image>
          </view>

          <view class="musicInfo">
            <view class="musicName">{{ControlList[indexList].name}}</view>
            <text class="fenge">-{{isPlay}}</text>
            <text class="authorName">{{ControlList[indexList].ar[0].name}}</text>
          </view>
        </navigator>
      </view>

      <!-- 没有数据的时候显示 -->
      <view class="bottomControlSwiper" v-else>
        <view class="musicInfo">
          <view class="musicName">暂无播放</view>
        </view>
      </view>
      <!-- right 图标 icon -->
      <view class="images">
        <!-- 关闭 -->
        <image class="image" src="../../static/image/播放 (1).png" v-if="!play" @click="isPlayMusic"></image>
        <!-- 开启 -->
        <image class="image" src="../../static/image/播放.png" v-else @click="isPlayMusic"></image>
        <uni-icons type="bars" size="34" @click="clickPopup"></uni-icons>
      </view>

    </view>

    <audio ref="audio" :src="`https://music.163.com/song/media/outer/url?id=${ControlList[indexList].id}.mp3`"></audio>
    <!-- 弹出层 -->



  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  // 实例需定义在外面在能使用
  // const innerAudioContext = uni.createInnerAudioContext()
  import innerAudioContext from '@/utils.js'
  export default {
    name: "buttom-control",
    props: {
      isPlay: {
        type: Boolean,
        default: true
      },
      songsLists: {
        type: Array,
        default: () => []
      }
    },
    computed: {
      // 调用 mapState 辅助方法，把 m_user 模块中的数据映射到当前用组件中使用
      ...mapState('musicDetailList', ['indexList', 'ControlList']),
      ...mapState('musicPage', ['changingTime']),
    },
    data() {

      return {
        play: false,
        // innerAudioContext: {}
        // 弹出层
        popUp: false,
        timer: null,
        durationtimer: null
      };
    },


    methods: {

      // 传值给播放页面是否需要开启或者关闭
      clickisPlayPageFlase() {
        // 关闭
        innerAudioContext.pause()
      },
      // 开启！
      clickisPlayPageTrue() {
        innerAudioContext.play()
      },
      getCurrentTiem() {
        // 我们在开启的时候获取到歌曲的当前时间
        this.timer = setInterval(() => {
          this.$store.commit('musicPage/songCurrentTime', innerAudioContext.currentTime)

        }, 1200)
        // 获取歌曲总时间
        innerAudioContext.onCanplay(() => {
          this.durationtimer = setInterval(() => {
            if (innerAudioContext.duration !== 0 && innerAudioContext.duration !== NaN) {
              clearInterval(this.durationtimer)
              // 把音频时长传到播放页面
              this.$store.commit('musicPage/songDurationTime', innerAudioContext.duration)
            }
          }, 100);
        })
      },
      // 是否播放
      palaymusic() {
        // 开启
        if (!this.play) {
          // console.log(true)
          console.log(this.play)
          innerAudioContext.play()

        }
        // 暂停
        if (this.play) {
          // console.log(false)
          console.log(this.play)
          innerAudioContext.pause()

        }
      },
      // icon 开关
      isPlayMusic() {
        this.$emit('change-Play', !this.play)
        this.palaymusic()
      }

    },

    watch: {
      // 监听拖拽事件的发生
      changingTime(newVal) {
        console.log(newVal)
        innerAudioContext.seek(newVal)
        setTimeout(() => {
          this.$store.commit('musicPage/scrollTop', 0)
        }, 1200)
      },
      indexList(newVal) {
        // 解决切换歌单页面无法继续显示的bug
        console.log(this.songsLists)
        this.$store.commit('musicDetailList/getbuttomControlList', this.songsLists)
        // 监听索引是否改变改变了我们就停止并且重新播放
        // 暂停
        innerAudioContext.pause()
        innerAudioContext.src =
          `https://music.163.com/song/media/outer/url?id=${this.ControlList[this.indexList].id}.mp3`
        if (!this.play) {
          this.$emit('change-Play', !this.play)
          // 开启
          innerAudioContext.play()
        } else {
          innerAudioContext.play()
        }

      },
      immediate: true,
      // 传值给组件
      isPlay(newVal) {
        // console.log(newVal)
        if (newVal) {
          this.getCurrentTiem()

        } else {
          clearInterval(this.timer)

        }

        this.play = this.isPlay
      },
      immediate: true
    }
  }
</script>

<style>
  .musicName {
    height: 100rpx;
    line-height: 100rpx;
    max-width: 30vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .images {
    position: absolute;
    top: 20%;
    right: 3%;
    display: flex;
    align-items: center;
  }

  uni-icons {
    margin-left: 10rpx;
  }

  .images .image {
    height: 60rpx;
    width: auto;
    width: 60rpx;


  }

  .authorName {
    font-size: 24rpx;
    color: #787677;
    height: 100rpx;
    line-height: 109rpx;
    max-width: 20vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .fenge {
    font-size: 24rpx;
    color: #787677;
    height: 100rpx;
    line-height: 109rpx;
    margin: 0 5rpx;
  }

  .bottomControl {
    position: fixed;
    display: flex;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 110rpx;
    border-top: 1rpx solid #ddd;
    background-color: white;
    /* overflow: hidden; */
  }

  .bottomControl .cover {
    position: absolute;
    top: 0;
    left: 34rpx;
    height: 120rpx;
    width: 120rpx;
    z-index: 10;
  }

  .bottomControl .disc {
    height: 100%;
    width: 100%;
  }

  .bottomControl .musicCover {
    width: 75%;
    height: 75%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);

    border-radius: 50%;
    z-index: -1;
  }

  .bottomControl .musicInfo {
    margin-left: 150rpx;
    height: 100%;
  }

  .bottomControl view .musicInfo {
    display: flex;
    align-items: center;
    margin-left: 150rpx;
    font-size: 30rpx;
    color: #aaa;
  }

  .bottomControl .musicInfo {
    line-height: 120rpx;
  }
</style>
